<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> -->
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <!--[if lt IE 9]>
    <script src="js/lib/html5shiv.min.js"></script>
    <![endif]-->
    <meta name="apple-mobile-web-app-capable" content="yes">  <!-- 苹果允许全屏模式 -->
    <meta name="apple-mobile-web-app-status-bar-style" content="black">  <!-- 苹果浏览器顶部状态栏颜色 -->
    <meta name="format-detection" content="telephone=no">  <!-- 忽略数字为电话号码 -->
    <link rel="apple-touch-icon-precomposed" href="favicon.ico">
    <link rel="shortcut icon" href="favicon.ico">
    <link rel="icon" type="image/x-icon" href="favicon.ico">
    <title>洗个毛-官方网站-叮叮科技</title>
    <link rel="stylesheet" href="../public/css/lib/normalize.css">
    <link rel="stylesheet" href="../public/css/index.css">
</head>
<body>
    <!-- 头部 -->
    <header>
        <div class="header-top">
            <div class="header-top-in"></div>
        </div>
        <div class="header-bottom">
            <div class="logo"></div>
            <nav id="nav">
                <ul>
                    <li class="on">首页</li>
                    <li>服务细节</li>
                    <div class="under-line" id="underLine"></div>
                </ul>
            </nav>
        </div>
    </header>
    <!-- /头部 -->
    <div class="home-container" id="home">
        <!-- banner -->
        <div class="banner">
            <div class="banner-in">
                <div class="box in">
                    <div class="price-title"></div>
                    <div class="flip-container">
                    <div class="flip flip-1">
                        <div class="top">
                            <div class="line">
                                <label>服务</label>
                                <select>
                                    <option value="xizao">洗澡</option>
                                    <option value="meirong">美容</option>
                                </select>
                            </div>
                            <div class="line"> 
                                <label>类型</label>
                                <select>
                                    <option value="xizao">小型( 0-5KG )</option>
                                    <option value="meirong">小型( 0-5KG )</option>
                                </select>
                            </div>
                            <div class="line">
                                <label>时间</label>
                                <select style="width:175px;">
                                    <option value="xizao">03-19(周四)</option>
                                    <option value="meirong">03-19(周四)</option>
                                </select>
                                <select style="width:136px;">
                                    <option value="xizao">15:30</option>
                                    <option value="meirong">15:30</option>
                                </select>
                            </div>
                            <div class="line">
                                <label>地址</label>
                                <input type="text" placeholder="请输入您所在的小区名">
                            </div>
                        </div>
                        <div class="mid button" id="bannerBtn1">
                           马上预约
                        </div>
                    </div>
                    <div class="flip flip-2">
                        <div class="top">
                            <div class="line">
                                    <label>电话</label>
                                    <input type="text" placeholder="请输入手机号" style="width:200px;">
                                    <button class="get-code">获取验证码</button>
                            </div>
                            <div class="line">
                                    <label>验证</label>
                                    <input type="text" placeholder="请输入验证码">
                            </div>
                        </div>
                        <div class="mid button" id="bannerBtn2">
                           提交
                        </div>
                    </div>
                    <div class="flip flip-3">
                        <div class="top">
                            <img src="../public/images/code.png">
                            <div class="text">
                                <span>优惠码:ED516788</span>微信输入此优惠码享首次免单
                            </div>
                        </div>
                        <div id="bannerBtn3" class="mid button" style="background-color: rgba(83, 189, 76, 0.85);">
                           叮叮教你“逃单”
                        </div>
                    </div>
                    </div>
                    <div class="bot">
                        <div class="btn ios"></div>
                        <div class="btn android"></div>
                    </div>
                </div>
            </div>
        </div>
        <!-- /banner -->
        <!-- home -->
        <div class="home">
            <h1 class="title" data-sr="move 16px scale down 200%, over .5s">叮叮宠物全新开通上门服务</h1>
            <h2 class="sub-title" data-sr="move 16px scale down 200%, over 0.8s">靠谱的宠物美容师团队，为爱宠提供上门洗澡，美容，寄养等服务 . <br/>叮叮宠物，您的私人宠物管家。</h2>
            <div class="under-line"></div>
            <div class="show show-1">
                <div class="left">
                    <h1 data-sr="move 360px enter left, over .5s">我要让所有人知道<br>您的“懒”被我承包啦</h1>
                    <h2 data-sr="move 360px enter left, over .7s">宠物美容车上门服务，为成都宠友开启一个全新的养宠时代</h2>
                </div>
                <div class="right" data-sr="move 360px enter right, over .5s">
                    
                </div>
            </div>
            <div class="show show-2">
                <div class="left" data-sr="move 360px enter left, over .5s">
                    
                </div>
                <div class="right">
                    <h1 data-sr="move 360px enter right, over .5s">主人家里耍游戏 爱宠车里洗澡澡</h1>
                    <h2 data-sr="move 360px enter right, over .7s">服务半径不超过小区面积,服务全程都在车里，您不用担心遇到坏叔叔<br>也不用担心自家地板被弄脏了</h2>
                </div>
            </div>
            <div class="show show-3">
                <div class="left">
                    <h1 data-sr="move 360px enter left, over .5s">其实一开始让我做体检，我是拒绝的</h1>
                    <h2 data-sr="move 360px enter left, over .7s">但是为了能够健健康康的陪伴主人，我还是接受了<br>我们为爱宠服务时会给狗狗做免费的体检，真正疼爱您的宠儿</h2>
                </div>
                <div class="right" data-sr="move 360px enter right, over .5s">
                    
                </div>
            </div>
            <div class="show show-4">
                <div class="left" data-sr="move 360px enter left, over .5s">
                    
                </div>
                <div class="right">
                    <h1 data-sr="move 360px enter right, over .5s">脏脏哒出门 萌萌哒回家</h1>
                    <h2 data-sr="move 360px enter right, over .5s">美容后的爱宠给您送回家中</h2>
                </div>
            </div>
        </div>
        <!-- /home-->
    </div>
    <div class="serve-container" id="serve">
      <!-- 图片采用延迟加载技术,减少首次加载等待时间 -->
      <div class="title-1"></div><!-- class="title-1" -->
      <div class="show-1"></div><!-- class="show-1" -->
      <div class="serve-banner"></div>
      <div class="title-2"></div><!-- class="title-1" -->
      <div class="show-2"></div><!-- class="show-1" -->
      <div class="title-3"></div><!-- class="title-1" -->
      <div class="show-3"></div><!-- class="show-1" -->
    </div>
    <footer>
        <div class="footer-in" data-sr="wait 0.2s flip 180deg, over .5s">
            Copyright © 叮叮宠物科技. All rights reserved.黔ICP备14001509号
        </div>
    </footer>
    <!-- 引入脚本 -->
    <script src="../public/js/lib/jquery-1.11.2.min.js"></script>
    <script src="../public/js/lib/scrollReveal.min.js"></script>
    <script>
        window.sr = new scrollReveal();
    </script>
    <script src="../public/js/index.min.js"></script>
</body>
</html>